<template>
	<view class="search_page">
		<view class="header_search">
			<u-search :showAction="true" actionText="搜索" :animation="true" :actionStyle="actionStyle"
				placeholder="请输入小区名称" :focus="true" showAction v-model.trim="searchValue" @change="serchChange"
				class="serch" @clear="clearSearch" borderColor="#d6d6d6"></u-search>
		</view>
		<view class="record">
			<view class="title">
				已录入小区
			</view>
			<view class="record_list">
				<u-cell-group :border="false">
					<u-cell v-for="(item, index) in recordList" :key="item.id" icon="clock" :title="item.name"
						:isLink="true" @click="gotoaddhouse(item)">
					</u-cell>
				</u-cell-group>
			</view>
		</view>
		<!-- 搜索建议 -->
		<scroll-view class="search_view" scroll-y v-show="searchIsShow">
			<view class="" v-show="searchList.length == 0">
				<u-empty mode="search" icon="../../../static/default/default.png">
				</u-empty>
			</view>
			<u-cell-group :border="false" v-show="searchList.length > 0" >
				<u-cell v-for="(item, index) in searchList" :key="item.id" icon="search" :isLink="true"
					@click="gotoaddhouse(item)">
					<template slot="title">
						<view ref="searchresultVal" v-html="computedtext(item.name)"></view>
					</template>
				</u-cell>
			</u-cell-group>
		</scroll-view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getHouse, // 获取房东已录入的小区列表
		getCommunity, // 关键字小区搜索
		addHouseInfo,// 房东新增房源信息
		getLandlordName//搜索房东关键字
	} from "@/api/home/index.js"

	import debounce from "@/utils/debounce.js"


	export default {
		data() {
			return {
				searchIsShow: false,
				recordList: [],
				searchValue: "",
				searchList: [],
				testSearchList: [],
				actionStyle: {
					color: "#f56e3e"
				}
			}
		},
		created() {
			//历史记录
			this.getHistory()
		},
		methods: {
			serchChange: debounce(async function() {
					const res = await getCommunity(this.searchValue)
					this.testSearchList = res.data.rows
					if (this.searchValue.length != 0) {
						this.searchIsShow = true;
						this.searchList = this.testSearchList.filter((item, index) => item.name.includes(this
							.searchValue))
					} else {
						this.searchIsShow = false;
						this.searchList = []
					}
				
			}, 1000),
			gotoaddhouse(item) {
				uni.setStorageSync('info',JSON.stringify(item))
					uni.navigateTo({
						url: "../../home/addhouse/index?info=" + JSON.stringify(item)
					})
				
			},

			computedtext(value) {
				return value.replace(this.searchValue, `<text style="color: red;">${this.searchValue}</text>`)
			},
			clearSearch() {
				this.searchIsShow = false;

			},
			async getHistory() {
				const res = await getHouse()
				if (res.data.code != 200) return this.$refs.uToast.show({
					message: '获取历史搜索失败',
					type: 'error'
				})
				this.recordList = res.data.data
			},
		},
		computed: {

		}
	}
</script>

<style lang="scss" scoped>
	@import "@/styles/global.scss";
	@import "@/styles/index.scss";

	.search_page {
		@include cover;
		@include boxSing;

		// padding: 20rpx;
		.header_search {
			padding: 20rpx;
			@include boxSing;
			height: 108rpx;
			// background-color: aqua;
		}

		.record {
			// padding: 20rpx;
			padding-left: 20rpx;
			@include boxSing;
			margin-top: 30rpx;

			.title {
				font-size: 25rpx;
				color: $noimportant;
				padding-left: 30rpx;
			}

			.record_list {
				margin-top: 30rpx;
			}
		}

		.search_view {
			width: 100%;
			height: 100vh;
			position: fixed;
			// top: 68rpx;
			top: 108rpx;
			background-color: #fff;
			padding: 20rpx;
			z-index: 999;
			@include boxSing;
		}
	}
</style>